<script>
	import TabBar from "@/components/layout/tabbar/index.vue";
	import HzSafeArea from "@/components/layout/hz/hz-safe-area.vue";
	import Config from "@/config";
	import {
		GetUserCoupons,
		getUserIntegral,
		useArticleApi,
		useSiteDataApi,
		GetUserReceiveCoupons
	} from "@/api/homePage";
	import {
		getNewtCollectionList,
		getUserCardInfoList
	} from "@/api/mall";
	import ZPMixin from "@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin";
	import {
		mapState
	} from 'vuex';

	export default {
		name: "myIndex",
		components: {
			HzSafeArea,
			TabBar
		},
		mixins: [ZPMixin],
		data() {
			return {
				imgUrl: Config.imgUrl,
				tabBarRef: null,
				paging: null,
				loading: false,
				siteId: [],
				initialStates: {},
				banner: "",
				menu: [],
				bannerLoaded: false,
				assets: {
					coupons: 0,
					integral: 0,
					collection: 0,
				},
				languageModalVisible: false,
				currentLanguage: uni.getStorageSync('language') || 'zh-CN'
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.base.userInfo,
				locationList: state => state.base.locationList,
				selectedLocation: state => state.base.selectedLocation
			}),
			safeAreaTop() {
				return this.$store.state.app.wxMenuClient.top + this.$store.state.app.wxMenuClient.height
			},
			mySite() {
				return Config.site.my.children
			},
			userImg() {
				return this.userInfo?.HeadImg ? this.userInfo.HeadImg : "/static/my/user.png"
			}
		},
		onLoad() {
			console.log(this.$store.state.base.userInfo)

			// 从存储中恢复位置选择信息
			const storedLocation = uni.getStorageSync('selectedLocation');
			if (storedLocation) {
				this.$store.commit('setSelectedLocationHome', storedLocation);
			}

			this.init()
		},
		
		onShow() {
			this.getUserAssets()
			//是否从问卷调查返回
			let questionnaireData = uni.getStorageSync('questionnaireData');
			if (questionnaireData && questionnaireData.CouponTempleId) {
				uni.removeStorageSync('questionnaireData');
				this.getUserReceiveCoupons(questionnaireData)
			}
		},
		methods: {
			// 打开语言选择弹窗
			openLanguageModal() {
				this.languageModalVisible = true
			},
			// 关闭语言选择弹窗
			closeLanguageModal() {
				this.languageModalVisible = false
			},
			// 切换语言
			switchLanguage(lang) {
				this.$i18n.locale = lang
				uni.setStorageSync('language', lang)
				this.currentLanguage = lang
				this.closeLanguageModal()

				// 刷新页面
				this.getUserAssets()

				// 显示切换成功提示
				uni.showToast({
					title: lang === 'zh-CN' ? '语言已切换为中文' : 'Language switched to English',
					icon: 'none'
				})
			},
			async init() {
				try {
					this.loading = true
					const res = await this.getMyConfig()
					// 请求队列
					this.siteId = res.Data?.map(item => item.Id)
					// 定义需要加载的模块
					const module = ["banner", "menu"]
					module.forEach(key => {
						if (this.siteId.includes(this.mySite[key].value)) {
							this.initialStates[key] = false
						}
					})
					const queues = []
					const requestMap = new Map() // 使用Map跟踪请求和模块的关系
					module.forEach(key => {
						console.log(key)
						if (key in this.initialStates) {
							console.log(this.mySite[key].type)
							const promise = this.mySite[key].type === "article" ?
								this.loadArticleData(this.mySite[key].value) :
								this.loadTheModule(this.mySite[key].value)

							// 存储promise与key的映射关系
							requestMap.set(promise, key)
							queues.push(promise)
						}
					})

					Promise.allSettled(queues).then(results => {
						// 处理每个结果，并知道它对应哪个模块
						results.forEach((result, index) => {
							const moduleKey = requestMap.get(queues[index])
							console.log(`模块 ${moduleKey} 加载结果:`, result)

							if (result.status === 'fulfilled') {
								// 根据模块类型处理数据
								this.processModuleData(moduleKey, result.value)
							} else {
								console.error(`模块 ${moduleKey} 加载失败:`, result.reason)
							}
						})

						// this.getUserAssets()
					})


					
				} catch (error) {
					console.log(error)
				} finally {
					this.loading = false
				}
			},
			// 领取优惠券
			async getUserReceiveCoupons(questionnaireData) {
				try {

					const {
						Data
					} = await GetUserReceiveCoupons(questionnaireData);

					if (Data.CouponCode) {
						uni.showToast({
							title: '已领取优惠券'
						});

					}
				} catch (e) {
					console.error('领取优惠券失败:', e);
				}
			},
			async getMyConfig() {
				return useSiteDataApi(Config.site.my.value)
			},
			// 处理模块数据的方法
			processModuleData(moduleKey, data) {
				console.log(`处理模块 ${moduleKey} 数据:`, data)
				// 根据不同模块处理数据
				switch (moduleKey) {
					case 'banner':
						this.banner = data.Data[0].CoverImg
						break
					case 'menu':
						// 处理菜单数据
						this.menu = data.Data.map(item => {
							return {
								id: item.Id,
								name: item.Name,
								icon: item.ImgUrl,
								linkUrl: item.LinkUrl
							}
						})
						break
					default:
						break
				}
				this.initialStates[moduleKey] = true
			},
			// 加载模块
			async loadTheModule(moduleId) {
				return useSiteDataApi(moduleId)
			},
			// 加载模块数据
			async loadArticleData(ArticleCategoryId) {
				return useArticleApi({
					ArticleCategoryId
				})
			},
			handleBannerLoad() {
				this.bannerLoaded = true;
			},
			getUserAssets() {
				Promise.allSettled([GetUserCoupons({
					Index: 1,
					Size: 100,
					BusinessId: 0,
					CouponStatus: 1
				}), getUserIntegral(), getUserCardInfoList({
					TypeArr: "15",
					Index: 1,
					Size: 1000,
				})]).then(res => {
					// 过滤出未过期的优惠券
					let coupons = res[0].value.Data || [];
					let validCoupons = coupons.filter(item => {
						if (!item.CouponTemple || !item.CouponTemple.EffectEndDatetime) return false;

						// 检查优惠券是否过期
						let now = new Date();
						let nowTime = now.getTime();
						let endDate = item.CouponTemple.EffectEndDatetime;

						// 如果日期格式是YYYY-MM-DD，添加当天结束时间
						if (endDate.length === 10) {
							endDate += ' 23:59:59';
						}

						let endTime = new Date(endDate).getTime();

						// 只返回未过期且状态为1(待使用)的优惠券
						return nowTime <= endTime && item.CouponStatus === 1;
					});

					this.assets.coupons = validCoupons.length;
					this.assets.integral = res[1].value.Data;
					this.assets.collection = res[2].value.Data.length;
				})
			},
			onRefresh() {
				this.getUserAssets()
				this.$refs.paging.complete()
			},
			menuClick(url) {
				console.log(url)
				if (url) {
					uni.navigateTo({
						url
					})
				} else {
					console.log("无url")
				}
			},
			jumpSettings() {
				uni.navigateTo({
					url: "/user_subpages/userCenter/editUserInfo"
				})
			},
			jumpCoupons() {
				uni.navigateTo({
					url: "/user_subpages/vip/coupon"
				})
			},
			jumpIntegral() {
				uni.navigateTo({
					url: "/user_subpages/vip/integral"
				})
			},
			jumpCollection() {
				uni.navigateTo({
					url: "/mall_subpages/cardPacks/list"
				})
			},
			jumpOrder(index) {
				this.$refs.tabBarRef.switchOrder(index)
			},
			jumpAttendance() {
				uni.navigateTo({
					url: "/user_subpages/userCenter/registration"
				})
			},

			// 积豆功能相关方法
			goToSelfBeans() {
				uni.navigateTo({
					url: "/beans_subpages/self/index"
				});
			},

			goToSignBeans() {
				uni.navigateTo({
					url: "/beans_subpages/sign/index"
				});
			},

			goToRedeemBeans() {
				uni.navigateTo({
					url: "/user_subpages/integral/index"
				});
			},

			goToSpendBeans() {
				uni.navigateTo({
					url: "/mall_subpages/mall/integral"
				});
			},

			// 一键求助方法
			makeHelpCall() {
				if (!this.selectedLocation || this.selectedLocation.value === 0) {
					// uni.showToast({
					//   title: '请先选择区域',
					//   icon: 'none'
					// });
					this.openLocationSelector()
					return;
				}

				// 查找当前区域的求助电话
				const currentLocation = this.locationList.find(item => item.value === this.selectedLocation.value);
				if (!currentLocation || !currentLocation.serviceLine || currentLocation.serviceLine.length === 0) {
					uni.showToast({
						title: this.$t('home.help.noHelpline'),
						icon: 'none'
					});
					return;
				}

				// 显示电话选择列表
				uni.showActionSheet({
					itemList: currentLocation.serviceLine.map(item => item.name),
					success: (res) => {
						const selectedPhone = currentLocation.serviceLine[res.tapIndex].value;
						uni.makePhoneCall({
							phoneNumber: selectedPhone,
							success: () => {
								console.log('拨打电话成功');
							},
							fail: (err) => {
								console.error('拨打电话失败:', err);
								uni.showToast({
									title: this.$t('home.help.callFailed'),
									icon: 'none'
								});
							}
						});
					}
				});
			},

			// 打开位置选择器
			openLocationSelector() {
				uni.showActionSheet({
					itemList: this.locationList.map(item => item.title),
					success: (res) => {
						const selectedLocation = this.locationList[res.tapIndex];
						this.$store.commit('setSelectedLocationHome', selectedLocation);
						// 保存选择到本地存储
						uni.setStorageSync('selectedLocation', selectedLocation);
					}
				});
			},
			jumpArticle() {
				uni.navigateTo({
					url: '/pages/article/index?id=4805'
				});
				let path = "https://wj.qq.com/s2/23176215/6134/"
				uni.navigateTo({
					url: `/pages/webView/webView?url=${path}`
				});
			},
			goQuestionnaire() {
				let questionnaireData = {
					CouponTempleId: 82,
					ReceivingMethod: 1,
					ExchangePoint: 1
				}
				uni.setStorageSync("questionnaireData", questionnaireData)
				uni.navigateToMiniProgram({
					appId: 'wxebadf544ddae62cb', // 必填
					path: 'pages/survey/index?sid=23233009&hash=p213&userid=my_user_1', // 可选，跳转的页面路径

					success(res) {
						console.log('跳转成功', res);
					},
					fail(err) {
						console.log('跳转失败', err);
					}
				});
			},
			goQRCode() {
				uni.navigateTo({
					url: `/ticket_subpages/traffic/mpBuyTickets?id=1&locationId=2`
				})
			},
		}
	}
</script>

<template>
	<z-paging ref="paging" refresher-only height="100vh"
		:paging-style="{minHeight: '100vh', backgroundColor: '#E2F9FF'}" @onRefresh="onRefresh">
		<!-- 位置选择器 -->
		<view class="location-selector" @click="openLocationSelector"
			:style="{'--top-position': (safeAreaTop - 30) + 'px'}">
			<text class="location-text">{{selectedLocation.title}}</text>
			<view class="location-arrow"></view>
		</view>

		<!-- 顶部蓝色背景区域 -->
		<view class="header" :style="{paddingTop: safeAreaTop + 'px'}">
			<image src="https://wzws.wanshanlundiao.cn/upload/img/20250430/202504301729148306.png" class="header-bg">
			</image>
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="avatar-wrapper">
					<image class="avatar" :src="userImg" mode="aspectFill"></image>
				</view>
				<view class="username">{{userInfo.Name}}</view>
				<view class="user-icons">
					<button class="kefuBtn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"
						style="background:none;border:none;box-shadow:none;padding:0;margin:0;color:#fff;">
						<image class="icon" src="/static/my/kefu.png" mode="aspectFit"></image>
					</button>

					<image class="icon" src="/static/my/settings.png" mode="aspectFit" @click="jumpSettings"></image>
				</view>
			</view>

			<!-- 用户数据统计 -->
			<view class="user-stats">
				<view class="stat-item" @click="jumpCoupons">
					<view class="stat-num animate-number">{{assets.coupons || '-'}}</view>
					<view class="stat-label">{{$t('my.assets.coupons')}}</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item" @click="jumpIntegral">
					<view class="stat-num animate-number">{{assets.integral || '-'}}</view>
					<view class="stat-label">{{$t('my.assets.points')}}</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item" @click="jumpCollection">
					<view class="stat-num animate-number">{{assets.collection || '-'}}</view>
					<view class="stat-label">{{$t('my.assets.cards')}}</view>
				</view>
			</view>
		</view>
		<view class="container">
			<!-- 积豆功能模块 -->
			<view class="beans-card">
				<view class="beans-title">{{$t('my.beans.title')}}</view>
				<view class="beans-icons">
					<view class="beans-item" @click="jumpAttendance">
						<image class="beans-icon"
							src="https://wzws.wanshanlundiao.cn/upload/img/20250430/202504301701319203.png"
							mode="aspectFit"></image>
						<text class="beans-name">{{$t('my.beans.sign')}}</text>
					</view>
					<!-- 小票得积分 -->
					<!-- 	<view class="beans-item" @click="goToRedeemBeans">
						<image class="beans-icon"
							src="https://wzws.wanshanlundiao.cn/upload/img/20250430/202504301701470482.png"
							mode="aspectFit"></image>
						<text class="beans-name">{{$t('my.beans.receipt')}}</text>
					</view> -->
					<view class="beans-item" @click="goToSpendBeans">
						<image class="beans-icon"
							src="https://wzws.wanshanlundiao.cn/upload/img/20250430/202504301701586732.png"
							mode="aspectFit"></image>
						<text class="beans-name">{{$t('my.beans.mall')}}</text>
					</view>
				</view>
			</view>

			<!-- 我的订单模块 -->
			<view class="order-card">
				<view class="card-header">
					<text class="card-title">{{$t('my.orders.title')}}</text>
					<view class="view-all" @click="jumpOrder(0)">
						<text>{{$t('my.orders.viewAll')}}</text>
						<image src="/static/home/right-arrow.png" class="arrow"></image>
					</view>
				</view>
				<view class="order-types">
					<view class="order-type" @click="jumpOrder(1)">
						<view class="icon-wrapper">
							<image class="order-icon" :src="imgUrl+'upload/img/ws_static/static/my2/order1.png'"
								mode="aspectFit"></image>
							<text v-if="false" class="badge">0</text>
						</view>
						<text class="order-name">{{$t('my.orders.pending')}}</text>
					</view>
					<view class="order-type" @click="jumpOrder(2)">
						<view class="icon-wrapper">
							<image class="order-icon" :src="imgUrl+'upload/img/ws_static/static/my2/order2.png'"
								mode="aspectFit"></image>
							<text v-if="false" class="badge">0</text>
						</view>
						<text class="order-name">{{$t('my.orders.unused')}}</text>
					</view>
					<view class="order-type" @click="jumpOrder(3)">
						<view class="icon-wrapper">
							<image class="order-icon" :src="imgUrl+'upload/img/ws_static/static/my2/order3.png'"
								mode="aspectFit"></image>
							<text v-if="false" class="badge">0</text>
						</view>
						<text class="order-name">{{$t('my.orders.undelivered')}}</text>
					</view>
					<view class="order-type" @click="jumpOrder(4)">
						<view class="icon-wrapper">
							<image class="order-icon" :src="imgUrl+'upload/img/ws_static/static/my2/order4.png'"
								mode="aspectFit"></image>
							<text v-if="false" class="badge">0</text>
						</view>
						<text class="order-name">{{$t('my.orders.refund')}}</text>
					</view>
				</view>
			</view>

			<!-- 广告横幅 -->
			<!-- <view class="banner" v-if="initialStates.banner" @click="jumpArticle">
				<image :src="banner" mode="aspectFill" @load="handleBannerLoad"
					:class="{'animate-banner': bannerLoaded}">
				</image>
			</view> -->
			<view class="banner2" v-if="initialStates.banner" @click="goQuestionnaire">
				<image :src="imgUrl + 'upload/img/ws_static/static/traffic/dcwj.png'" mode="widthFix"
					@load="handleBannerLoad" :class="{'animate-banner': bannerLoaded}">
				</image>
			</view>

			<!-- 快捷入口 -->
			<view class="quick-entry-card animate-card" v-if="initialStates.menu">
				<view class="entry-header">
					<text class="entry-title">{{$t('my.quickEntry.title')}}</text>
				</view>
				<view class="entry-list">
					<view class="entry-item animate-item" @click="menuClick(item.linkUrl)" v-for="(item, index) in menu"
						:key="index" :style="{ animationDelay: index * 0.1 + 's' }">
						<button class="share-button" v-if="item.id === 3617" open-type="share"></button>
						<image class="entry-icon" :src="item.icon" mode="aspectFit"></image>
						<text class="entry-name">{{item.name}}</text>
						<image src="/static/home/right-arrow.png" class="entry-arrow"></image>
					</view>
					<!-- <view class="entry-item animate-item" @click="openLanguageModal">
						<image class="entry-icon" src="https://wzws.wanshanlundiao.cn/upload/img/20250602/202506021438566622.png" mode="aspectFit"></image>
						<text class="entry-name">{{$t('my.language.title')}}</text>
						<image src="/static/home/right-arrow.png" class="entry-arrow"></image>
					</view> -->
				</view>
			</view>
		</view>
		<template #bottom>
			<TabBar ref="tabBarRef" :isFixed="false"></TabBar>
			<hz-safe-area></hz-safe-area>
		</template>

		<!-- 一键求助按钮 -->
		<view class="help-btn" @click="makeHelpCall">
			<image src="https://wzws.wanshanlundiao.cn/upload/img/20250430/202504301818187448.png" mode="aspectFit">
			</image>
		</view>

		<!-- 语言选择弹窗 -->
		<view class="language-modal" v-if="languageModalVisible">
			<view class="language-modal-mask" @click="closeLanguageModal"></view>
			<view class="language-modal-content">
				<view class="language-modal-header">
					<text class="language-modal-title">{{$t('my.language.title')}}</text>
					<view class="language-modal-close" @click="closeLanguageModal">×</view>
				</view>
				<view class="language-modal-body">
					<view class="language-modal-item" @click="switchLanguage('zh-CN')">
						<text class="language-name">{{$t('my.language.chinese')}}</text>
						<view class="language-check" v-if="currentLanguage === 'zh-CN'">✓</view>
					</view>
					<view class="language-modal-item" @click="switchLanguage('en-US')">
						<text class="language-name">{{$t('my.language.english')}}</text>
						<view class="language-check" v-if="currentLanguage === 'en-US'">✓</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<style scoped lang="scss">
	.container {
		z-index: 2;
		position: relative;
		margin-top: -68rpx;
		padding: 0 30rpx 30rpx 30rpx;
	}

	/* 顶部蓝色背景区域 */
	.header {
		position: relative;
		height: 440rpx;
		padding: 30rpx;

		.header-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
	}

	/* 用户信息 */
	.user-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #fff;
		padding-left: 20rpx;

		.avatar-wrapper {
			margin-right: 20rpx;

			.avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
		}

		.username {
			flex: 1;
			font-size: 34rpx;
			font-weight: 500;
		}

		.user-icons {
			display: flex;
			gap: 20rpx;

			.kefuBtn {
				font-size: 24rpx;
				margin-right: 10rpx;
			}

			.icon {
				width: 38rpx;
				height: 38rpx;
			}
		}
	}

	/* 用户数据统计 */
	.user-stats {
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;

		.stat-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.stat-num {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 4rpx;
				opacity: 0;
				transform: translateY(20rpx);

				&.animate-number {
					animation: numberFadeIn 0.6s ease forwards;
				}
			}

			.stat-label {
				font-size: 24rpx;
			}
		}

		.stat-divider {
			width: 2rpx;
			height: 40rpx;
			background-color: rgba(255, 255, 255, 0.3);
		}
	}

	@keyframes numberFadeIn {
		0% {
			opacity: 0;
			transform: translateY(20rpx);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 积豆功能模块 */
	.beans-card {
		position: relative;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;

		.beans-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 20rpx;
		}

		.beans-icons {
			display: flex;
			justify-content: space-around;

			.beans-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;

				.beans-icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}

				.beans-name {
					font-size: 24rpx;
					color: #333;
					text-align: center;
				}
			}
		}
	}

	/* 我的订单模块 */
	.order-card {
		position: relative;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;

			.card-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}

			.view-all {
				font-size: 24rpx;
				color: #999;

				.arrow {
					width: 12rpx;
					height: 22rpx;
					transform: translateY(1rpx);
					margin-left: 10rpx;
				}
			}
		}

		.order-types {
			display: flex;
			justify-content: space-between;

			.order-type {
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon-wrapper {
					position: relative;
					margin-bottom: 10rpx;

					.order-icon {
						width: 50rpx;
						height: 50rpx;
					}

					.badge {
						position: absolute;
						top: -8rpx;
						right: -8rpx;
						background-color: #ff5a5a;
						color: #ffffff;
						font-size: 20rpx;
						min-width: 28rpx;
						height: 28rpx;
						text-align: center;
						line-height: 28rpx;
						border-radius: 14rpx;
					}
				}

				.order-name {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}

	/* 动画效果 */
	@keyframes slideInLeft {
		from {
			opacity: 0;
			transform: translateX(-100rpx);
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.animate-banner {
		animation: slideInLeft 0.8s ease-out forwards;
	}

	.animate-card {
		animation: fadeInUp 0.8s ease-out forwards;
	}

	.animate-item {
		opacity: 0;
		animation: fadeIn 0.5s ease-out forwards;
	}

	/* 广告横幅 */
	.banner {
		margin: 20rpx 0;
		height: 216rpx;
		border-radius: 16rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			opacity: 0;

			&.animate-banner {
				animation: slideInLeft 0.8s ease-out forwards;
			}
		}
	}
	/* 广告横幅 */
	.banner2 {
		margin: 20rpx 0;
		width: 100%;
		border-radius: 16rpx;
		overflow: hidden;
	
		image {
			width: 100%;
			opacity: 0;
	
			&.animate-banner {
				animation: slideInLeft 0.8s ease-out forwards;
			}
		}
	}

	/* 快捷入口卡片 */
	.quick-entry-card {
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

		.entry-header {
			margin-bottom: 20rpx;

			.entry-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.entry-list {

			.entry-item {
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.entry-icon {
					margin-right: 20rpx;
					width: 28rpx;
					height: 28rpx;
				}

				.entry-name {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}

				.entry-arrow {
					width: 12rpx;
					height: 22rpx;
					transform: translateY(1rpx);
				}

				.share-button {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
			}
		}
	}

	/* 一键求助按钮样式 */
	.help-btn {
		position: fixed;
		right: 30rpx;
		bottom: 190rpx;
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #FF7764 0%, #FF6B31 100%);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(255, 75, 49, 0.3);
		z-index: 999;

		&::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: inherit;
			animation: ripple 2s infinite;
			opacity: 0.6;
		}

		&::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: inherit;
			animation: ripple 2s infinite 1s;
			opacity: 0.6;
		}

		image {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
		}

		text {
			font-size: 24rpx;
			color: #fff;
			position: relative;
			z-index: 1;
		}
	}

	@keyframes ripple {
		0% {
			transform: scale(1);
			opacity: 0.6;
		}

		100% {
			transform: scale(1.5);
			opacity: 0;
		}
	}

	/* 位置选择器样式 */
	.location-selector {
		position: absolute;
		left: 0;
		top: var(--top-position, 120rpx);
		z-index: 100;
		background: rgba(255, 255, 255, 0.8);
		padding: 10rpx 20rpx;
		border-radius: 0 30rpx 30rpx 0;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}

	.location-text {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.location-arrow {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10rpx 6rpx 0 6rpx;
		border-color: #333 transparent transparent transparent;
		margin-left: 10rpx;
	}

	/* 语言选择弹窗样式 */
	.language-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.language-modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.language-modal-content {
		position: relative;
		width: 80%;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		z-index: 1001;
	}

	.language-modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.language-modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.language-modal-close {
		font-size: 40rpx;
		color: #999;
		padding: 0 20rpx;
	}

	.language-modal-body {
		padding: 30rpx;
	}

	.language-modal-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.language-modal-item:last-child {
		border-bottom: none;
	}

	.language-name {
		font-size: 30rpx;
		color: #333;
	}

	.language-check {
		font-size: 32rpx;
		color: #498FFF;
		font-weight: bold;
	}
</style>

<style>
	.kefuBtn::after {
		border: none !important;
	}
</style>